<template>
    <div class="container">
        <div class="row">
            <div class="col-3">
                <div class="card" style="margin-top: 20px;">
                    <div class="card-body">
                        <img :src="$store.state.user.photo" alt="" style="width: 100%;">
                        <div style="text-align: right; ">
                            <input type="file" @change="handleFileChange" accept="image/*" ref="fileInput" style="display: none;"/>
                            <button type="button" class="btn btn-outline-secondary btn-sm"
                                @click="triggerFileInput" style="margin-top: 5px;"
                            >更换头像</button>
                        </div>
                        <div style="color: red; text-align: right;" v-if="error_message != null">{{ error_message }}</div>
                        <hr>
                        <div class="info">
                            <p class="info-username">{{ $store.state.user.username }}</p>
                        </div>
                        <hr>
                    </div>
                </div>
            </div>
            <div class="col-9">
                <div class="card" style="margin-top: 20px;">
                    <div class="card-body">
                        <StudentInfo v-if="$store.state.user.identity == 'student'" />
                        <TeacherInfo v-else-if="$store.state.user.identity == 'teacher'" />
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import StudentInfo from '@/components/StudentInfo.vue';
import TeacherInfo from '@/components/TeacherInfo.vue';
import $ from 'jquery';
import { useStore } from 'vuex';
import { ref } from 'vue';

const fileInput = ref(null);
const error_message = ref(null);
const triggerFileInput = () => {
    fileInput.value.click();  // 触发文件选择框的点击事件
};

const clearMessage = () => {
    error_message.value = "";
}

const store = useStore();
// 图片选择事件
const handleFileChange = (event) => {
    const file = event.target.files[0];

    if (file) {
        const maxSize = 2 * 1024 * 1024;  // 2MB
        // 判断文件大小
        if (file.size > maxSize) {
            error_message.value = '文件大小不能超过 2MB';
            event.preventDefault();  // 阻止表单提交
            setTimeout(clearMessage, 5000);
            return;
        }
        // 调用上传图片函数
        uploadImage(file);
    }
};

// 使用 jQuery 的 $.ajax 上传图片
const uploadImage = (file) => {
    const formData = new FormData();
    formData.append('file', file);
    error_message.value = "";

    // 使用 $.ajax 发送请求
    $.ajax({
        url: 'http://localhost:3000/api/account/update-photo',   // 后端上传接口
        type: 'POST',                // 请求方式
        headers: {      // jwt验证写法
            'Authorization': "Bearer " + store.state.user.token,
        },
        data: formData,              // 上传的文件数据
        processData: false,          // 必须设置为 false，避免 jQuery 处理数据
        contentType: false,          // 必须设置为 false，告诉 jQuery 不要设置 Content-Type
        success(resp) {
            store.commit('updatePhoto', resp.imageUrl);
        },
        error(resp) {
            console.log(resp);
        }
    });
};

</script>

<style scoped>

.info {
    display: flex;
    width: 100%;
    height: 5vh;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.info-username {
    font-size: 30px;
    font-weight: 700;
}

</style>